
function makeFontSetting(div_id,font_id) {
    var setting_html = `

    <div style="display: flex;flex-direction: row;">

    <div class="input-row">
    <span>字体大小：</span>
    <input style="width: 50px;" id="${font_id}_size" value="15" />
    <span style="margin-left:10px;">px</span>
    </div>
    <div class="input-row">
        <span>字体行高：</span>
        <input style="width: 50px;" id="${font_id}_lineheight" value="20" />
        <span style="margin-left:10px;">px</span>
    </div>
    <div class="input-row">

        <span>字体样式：</span>
        <form id="${font_id}_type" class="layui-form" action="">
            <div class="">
                <div>
                    <input type="checkbox" lay-filter="${font_id}_css" name="${font_id}_css" title="加粗">
                    <input type="checkbox" lay-filter="${font_id}_css" name="${font_id}_css" title="下划线">
                </div>
            </div>
        </form>
    </div>

</div>
<div style="display: flex;flex-direction: row;">
    <div class="input-row">
        <span>对齐方式：</span>
        <select id="${font_id}_select_align">
            <option value="居左">居左</option>
            <option value="居中">居中</option>
            <option value="居右">居右</option>
    
        </select>
    </div>
    <div class="input-row">
        <span>字体颜色：</span>
        <div id="${font_id}_color">
            <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change='change'>
            </el-color-picker>
        </div>
    
        <div id="${font_id}_color_show"></div>
    </div>
</div>
<div style="display: flex;flex-direction: row;">
<div class="input-row">
    <span>预设字体：</span>
    <select id="${font_id}_select_type">
        <option value="无">无</option>
        <option value="Serif 字体">Serif 字体</option>
        <option value="Sans-serif 字体">Sans-serif 字体</option>
        <option value="Monospace 字体">Monospace 字体</option>
        <option value="Cursive 字体">Cursive 字体</option>
        <option value="Fantasy 字体">Fantasy 字体</option>
    </select>
</div>

<div class="input-row">
    <span>超出部分：</span>
    <select id="${font_id}_select_word">
        <option value="默认">默认</option>
        <option value="强制不换行">强制不换行</option>
        <option value="自动换行">自动换行</option>
        <option value="强制英文单词断行">强制英文单词断行</option>

    </select>
</div>
</div>
<script>

    //组件初始化
    var colorMain = {
        data() {
                    return {
                        color: 'rgba(0, 0, 0, 1)',
                        predefineColors: [
                            '#ff4500',
                            '#ff8c00',
                            '#ffd700',
                            '#90ee90',
                            '#00ced1',
                            '#1e90ff',
                            '#c71585',
                            'rgba(255, 69, 0, 0.68)',
                            'rgb(255, 120, 0)',
                            'hsv(51, 100, 98)',
                            'hsva(120, 40, 94, 0.5)',
                            'hsl(181, 100%, 37%)',
                            'hsla(209, 100%, 56%, 0.73)',
                            '#c7158577'
                        ]
                    }
                },
                methods: {
                    change() { //容器变化监听
                        $("#${font_id}_color_show").html(this.color);
                        window['text_cb']();
                    }
                }
            }
            var Ctor = Vue.extend(colorMain);
            new Ctor().$mount('#${font_id}_color');
            layui.use('form', function () {
                var form = layui.form;
                form.on("checkbox(${font_id}_css)", function (data) {
                    if (data.elem.checked && data.elem.title == "加粗") {
                        console.log('加粗选中')
                        window['${font_id}_blod'] = true
                        window['text_cb']();
                    }
                    if (!data.elem.checked && data.elem.title == "加粗") {
                        console.log('加粗取消')
                        window['${font_id}_blod'] = false
                        window['text_cb']();
                    }
                    if (data.elem.checked && data.elem.title == "下划线") {
                        console.log('下划线选中')
                        window['${font_id}_underline'] = true
                        window['text_cb']();
                    }
                    if (!data.elem.checked && data.elem.title == "下划线") {
                        console.log('下划线取消')
                        window['${font_id}_underline'] = false
                        window['text_cb']();
                    }
                });
            });
</script>
`
//console.log(setting_html)
$(`#${div_id}`).prepend(setting_html);
}
function fontListenChange(font_id,cb){
    //绑定行高
    $(`#${font_id}_lineheight`).bind("input propertychange", function () {
        console.log('1122')
        console.log($(this).val());
        if(cb){
            cb();
        }
        $(`#${font_id}_lineheight`)[0].focus()
    });
    //绑定大小
    $(`#${font_id}_size`).bind("input propertychange", function () {
        console.log('1122')
        console.log($(this).val());
        if(cb){
            cb();
        }
        $(`#${font_id}_size`)[0].focus()
    });
    //绑定字体样式
	$(`#${font_id}_select_type`).change(function () {
        console.log($(this).val());
        if(cb){
            cb();
        }
    });
    //绑定字体样式
	$(`#${font_id}_select_align`).change(function () {
        console.log($(this).val());
        if(cb){
            cb();
        }
    });
    $(`#${font_id}_select_word`).change(function () {
        console.log($(this).val());
        if(cb){
            cb();
        }
    });

}
function  fontSettingReset(font_id) {
    $(`#${font_id}_select_word`).val('默认');
    $(`#${font_id}_lineheight`).val("20");
    $(`#${font_id}_size`).val("15");
    $(`#${font_id}_value`).val("");
    $(`#${font_id}_select_type`).val('无');
    $(`#${font_id}_select_align`).val('居左');
    $(`#${font_id}_type`)[0].reset();
    layui.form.render();
    window[`${font_id}_blod`] = false
    window[`${font_id}_underline`] = false
}
function fontGetValues(font_id) {
    var _select_word = $(`#${font_id}_select_word option:selected`).val();
    var _lineheight = $(`#${font_id}_lineheight`).val();
    var _size = $(`#${font_id}_size`).val();
    var _color = $(`#${font_id}_color_show`).html();
    var _value = $(`#${font_id}_value`).val();
    var _select_type = $(`#${font_id}_select_type option:selected`).val();
    var _select_align = $(`#${font_id}_select_align option:selected`).val();
    var blod = window[`${font_id}_blod`]
    var underline = window[`${font_id}_underline`]
    var obj={}
    obj.select_word=_select_word;
    obj.lineheight=_lineheight;
    obj.size = _size;
    obj.color = _color;
    obj.value = _value;
    obj.select_type = _select_type;
    obj.select_align = _select_align;
    obj.blod = blod;
    obj.underline = underline;
    var control = ""
    if(_lineheight!='-1' && _lineheight !=""){
        control = control + `line-height:${_lineheight}px;`
    }
    if(_size!='-1' && _size !=""){
        control = control + `font-size:${_size}px;`
    }
    if(_color!=""){
        control = control + `color:${_color};`
    }
    if (window[`${font_id}_blod`])
        control = control + `font-weight:bold;`
    if (window[`${font_id}_underline`])
        control = control + `text-decoration:underline;`
    switch (_select_type) {
        case 'Serif 字体':
            control = control + `font-family: serif;`
            break;
        case 'Sans-serif 字体':
            control = control + `font-family: sans-serif;`
            break;
        case 'Monospace 字体':
            control = control + `font-family: monospace;`
            break;
        case 'Cursive 字体':
            control = control + `font-family: cursive;`
            break;
        case 'Fantasy 字体':
            control = control + `font-family: fantasy;`
            break;
        default:
            break;
    }
    switch (_select_align) {
        case '居左':
            break;
        case '居中':
            control = control + `text-align: center;`
            break;
        case '居右':
            control = control + `text-align: end;`
            break;
        default:
            break;
    }
    switch (_select_word) {
        case '强制不换行':
            control = control + `white-space:nowrap;`;
            break;
        case '自动换行':
            control = control + `word-wrap: break-word;word-break: normal;;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;`
            break;
        case '强制英文单词断行':
            control = control + `word-break:break-all;`
            break;
        default:
            break;
    }
    obj.control=control
    return obj;
}